<template>
  <div class="FactoryOverview">
    <div class="leftFactory">
      <div class="conList first">
        <p class="conTitle">
          <span>产能及库存统计</span>
          <span class="last">交付风险预测:0</span>
        </p>
        <div class="conMain">
          <ul>
            <li>
              <div class="inventory1"></div>
              <div>
                <p>当月产量</p>
                <p><span>6.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory3"></div>
              <div>
                <p>当日产量</p>
                <p><span>1.2</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory2"></div>
              <div>
                <p>当前库存</p>
                <p><span>5.5</span>万/件</p>
              </div>
            </li>
            <li>
              <div class="inventory4"></div>
              <div>
                <p>待交付量</p>
                <p><span>0.5</span>万/件</p>
              </div>
            </li>
          </ul>
          <!-- <div>
            <p>综合周转率</p>
            <p><span>28.12</span>次/月</p>
          </div> -->
        </div>
      </div>
      <div class="conList second">
        <p class="conTitle">
          <span>生产订单趋势</span>
        </p>
        <div class="conMain" ref="secondRef"></div>
      </div>
      <div class="conList third">
        <p class="conTitle">
          <span>仓库使用率</span>
        </p>
        <div class="conMain">
          <div class="columnBox column1">
            <ul>
              <li>
                <p>库区</p>
                <p><span>10</span>个</p>
              </li>
              <li>
                <p>库位</p>
                <p><span>421</span>个</p>
              </li>
            </ul>
            <div class="column" ref="columnRef1"></div>
            <p>原料仓</p>
          </div>
          <div class="columnBox column2">
            <ul>
              <li>
                <p>库区</p>
                <p><span>10</span>个</p>
              </li>
              <li>
                <p>库位</p>
                <p><span>10</span>个</p>
              </li>
            </ul>
            <div class="column" ref="columnRef2"></div>
            <p>成品仓</p>
          </div>
        </div>
      </div>
    </div>
    <div class="centerMain">
      <div class="centerTop">
        <div class="topMain">
          <p class="title">
            <span>已安全生产</span>
            <span>累计总产量</span>
          </p>
          <div class="time">
            <p><span>1234</span>天</p>
            <p><span>18607876</span>PCS</p>
          </div>
        </div>
        <div class="centerText">
          <div>
            <p>当班人</p>
            <p>
              <span>3855</span>
              人
            </p>
          </div>
          <div>
            <p>到访人员</p>
            <p>
              <span>487</span>
              人
            </p>
          </div>
          <div>
            <p>到访车辆</p>
            <p>
              <span>12</span>
              人
            </p>
          </div>
        </div>
      </div>
      <div class="bottomMain">
        <div class="title">
          <p>
            厂区总面积：
            <span>7770.39</span>
            m²
          </p>
        </div>
        <div class="centerBottom" ref="centerBottomRef"></div>
      </div>
    </div>
    <div class="rightFactory">
      <ul class="rightF1">
        <li class="button">
          <p>总事件</p>
          <p><span>5689</span>个</p>
        </li>
        <li class="button">
          <p>今日事件</p>
          <p><span>5689</span>个</p>
        </li>
        <li class="icon"></li>
        <li class="text">当前无紧急事件</li>
      </ul>
      <div class="rightF2 rightStyles conList">
        <p class="conTitle">
          <span>生产设备</span>
        </p>
        <div class="con">
          <ul class="text">
            <li>
              <p>综合利用率</p>
              <p><span>78</span>%</p>
            </li>
            <li>
              <p>停机率</p>
              <p><span>8.2</span>%</p>
            </li>
            <li>
              <p>AI预警</p>
              <p><span>5</span>次</p>
            </li>
          </ul>
          <div class="zlBottom">
            <div class="productionEquipmentBox">
              <div class="textZL">
                <p>917</p>
                <p>设备总量</p>
              </div>
              <div
                class="productionEquipment"
                ref="productionEquipmentRef"
              ></div>
            </div>
            <div class="tip">
              <p>在线设备<span>822</span></p>
              <p>故障设备<span>95</span></p>
              <p>待机设备<span>0</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="rightF3 conList">
        <p class="conTitle">
          <span>生产良率分析</span>
        </p>
        <div class="yieldBox">
          <div class="title">
            达标良率
            <span>97</span>%
          </div>
          <div class="yieldList" ref="yieldRef"></div>
        </div>
      </div>
      <div class="rightF4 rightStyles conList">
        <p class="conTitle">
          <span>能耗监测</span>
        </p>
        <div class="con">
          <ul class="text">
            <li>
              <p>总耗电量</p>
              <p><span>18.3</span>kwh</p>
            </li>
            <li>
              <p>本月用电</p>
              <p><span>5.6</span>kwh</p>
            </li>
          </ul>
          <div class="zlBottom lastBottom">
            <div class="productionNHBox">
              <div class="textNH">
                <p>
                  <span>{{ nhValue }}</span>
                  kwh
                </p>
                <p>{{ nhTxt }}耗电量</p>
              </div>
              <div class="productionEquipment" ref="energyRef"></div>
            </div>
            <div class="tip">
              <p>生活<span>55%</span></p>
              <p>生产<span>25%</span></p>
              <p>办公<span>12%</span></p>
              <p>客勤<span>12%</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { getColumn1Init } from './column'
let nhTxt = ref('生活')
let nhValue = ref(26)
let secondList = null
let yieldList = null
let energyList = null
let centerBottomList = null
let productionEquipmentList = null
const secondRef = ref(null)
const centerBottomRef = ref(null)
const productionEquipmentRef = ref(null)
const yieldRef = ref(null)
const energyRef = ref(null)

let column1List = null
let column2List = null
const columnRef1 = ref(null)
const columnRef2 = ref(null)

const getInit = () => {
  // 存储原始数据和状态
  let originalStartDate = new Date();
  let profitSeed = Math.random() * 100;
  let costSeed = Math.random() * 100;
  let isResetting = false;

  // 生成随机数据函数
  const generateRandomData = (baseVal, count, yRange, seed) => {
    const seriesData = [];
    for (let i = 0; i < count; i++) {
      // 使用种子确保重置后数据一致
      const value = Math.round(baseVal + seed + (Math.random() * yRange - yRange/2));
      seriesData.push(Math.max(0, value));
    }
    return seriesData;
  };

  // 获取月份天数
  const getDaysInMonth = (year, month) => {
    return new Date(year, month + 1, 0).getDate();
  };

  // 获取x轴日期数据
  const getXAxisData = (startDate, count) => {
    const dates = [];
    const currentDate = new Date(startDate);
    
    for (let i = 0; i < count; i++) {
      const month = currentDate.getMonth() + 1;
      const date = currentDate.getDate();
      dates.push(`${month}/${date}`);
      
      // 计算下一天
      currentDate.setDate(currentDate.getDate() + 1);
    }
    return dates;
  };

  // 显示8天数据
  const dataCount = 8;
  // 当前起始日期
  let startDate = new Date(originalStartDate);

  // 初始化数据
  const initData = () => {
    return {
      xAxisData: getXAxisData(startDate, dataCount),
      profitData: generateRandomData(150, dataCount, 100, profitSeed),
      costData: generateRandomData(250, dataCount, 150, costSeed)
    };
  };

  let { xAxisData, profitData, costData } = initData();

  let option = {
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicOut',
    
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      type: 'value',
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    series: [
      {
        name: '利润',
        data: profitData,
        type: 'bar',
        barWidth: 12,
        z: 9,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#5df69d' },
            { offset: 1, color: '#0f8d7e' }
          ])
        },
      },
      {
        name: '成本',
        type: 'line',
        z: 8,
        data: costData,
        areaStyle: {
          color: "rgba(1,36,64,0.5)",
        },
        lineStyle: {
          width: 2,
          color: '#4080ff'
        },
        symbol: 'circle',
        symbolSize: 6
      },
    ],
    grid: {
      top: '20px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
  };

  secondList.setOption(option, true);
  
  // 窗口大小变化时调整图表
  window.addEventListener("resize", resize);
  
  // 定时器
  let timer = setInterval(() => {
    if (isResetting) return;
    
    // 保存当前日期用于判断
    const currentMonth = startDate.getMonth();
    const currentYear = startDate.getFullYear();
    
    // 日期向前滚动一天
    startDate.setDate(startDate.getDate() + 1);
    
    // 检查是否跨月（即原日期是月底）
    const isEndOfMonth = (
      startDate.getMonth() !== currentMonth || 
      startDate.getFullYear() !== currentYear
    );
    
    if (isEndOfMonth) {
      // 重置到原始数据
      resetToOriginal();
      return;
    }
    
    // 正常更新数据
    updateChartData();
  }, 2000);
  
  // 更新图表数据
  const updateChartData = () => {
    xAxisData = getXAxisData(startDate, dataCount);
    profitData = generateRandomData(150, dataCount, 100, profitSeed);
    costData = generateRandomData(250, dataCount, 150, costSeed);
    
    secondList.setOption({
      xAxis: {
        data: xAxisData
      },
      series: [
        {
          name: '利润',
          data: profitData
        },
        {
          name: '成本',
          data: costData
        }
      ]
    });
  };
  
  // 重置到原始数据
  const resetToOriginal = () => {
    isResetting = true;
    
    // 清除现有定时器
    clearInterval(timer);
    
    // 重置日期和数据
    startDate = new Date(originalStartDate);
    const { xAxisData, profitData, costData } = initData();
    
    // 更新图表（无动画）
    secondList.setOption({
      animation: false,
      xAxis: {
        data: xAxisData
      },
      series: [
        {
          name: '利润',
          data: profitData
        },
        {
          name: '成本',
          data: costData
        }
      ]
    });
    
    // 短暂延迟后重新启用动画并重启定时器
    setTimeout(() => {
      secondList.setOption({ animation: true });
      timer = setInterval(() => {
        if (isResetting) return;
        
        const currentMonth = startDate.getMonth();
        const currentYear = startDate.getFullYear();
        
        startDate.setDate(startDate.getDate() + 1);
        
        const isEndOfMonth = (
          startDate.getMonth() !== currentMonth || 
          startDate.getFullYear() !== currentYear
        );
        
        if (isEndOfMonth) {
          resetToOriginal();
          return;
        }
        
        updateChartData();
      }, 2000);
      
      isResetting = false;
    }, 500);
  };
};
const getCenterBottomInit = () => {
  // 原始数据
  const originalLabels = ['办公区', '成品仓', '接待区', '收发货', '包材仓', '生产区', '资料区', '备料区'];
  const originalData = [120, 200, 150, 80, 70, 110, 130, 300];
  
  // 状态变量
  let currentLabels = [...originalLabels];
  let currentData = [...originalData];
  let updateCount = 0;
  const maxUpdates = 10;
  let nextLabelIndex = 0;
  
  // 生成随机值
  const generateRandomValue = () => {
    return Math.floor(Math.random() * 201) + 50; // 50-250之间的随机数
  };
  
  // 获取下一个标签（循环使用原始标签）
  const getNextLabel = () => {
    const label = originalLabels[nextLabelIndex];
    nextLabelIndex = (nextLabelIndex + 1) % originalLabels.length;
    return label;
  };
  
  // 更新数据函数
  const updateData = () => {
    if (updateCount >= maxUpdates) {
      // 重置为原始状态
      currentLabels = [...originalLabels];
      currentData = [...originalData];
      updateCount = 0;
      nextLabelIndex = 0;
    } else {
      // 添加新数据点
      const newLabel = getNextLabel();
      const newValue = generateRandomValue();
      
      // 移除第一个数据点并添加新数据点到末尾
      currentLabels = [...currentLabels.slice(1), newLabel];
      currentData = [...currentData.slice(1), newValue];
      
      updateCount++;
    }
    
    // 更新图表
    centerBottomList.setOption({
      xAxis: {
        data: currentLabels
      },
      series: [{
        data: currentData
      }]
    });
  };
  
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#010e1c',
      borderWidth: 0,
      formatter: function (params) {
        return `<div style="min-width:50px;background-color:#010e1c;border-width:0">
          <p style="color: #fff;">${params[0].name}</p>
          <p style="padding:2px 0;display: flex;justify-content: space-between;align-items: center;">
          <span style="display: flex;align-items: center;"><i style="display:inline-block;width:4px;height:4px;background-color: #0ECB81;margin-right:6px;"></i>
            </span>
          <span style="font-size: 12px;">
          ${params[0].value}
          </span>
          </p>
      </div>`
      }
    },
    xAxis: {
      type: 'category',
      data: currentLabels,
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      type: 'value',
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    series: [
      {
        name: '利润',
        data: currentData,
        type: 'bar',
        barWidth: 12,
        z: 9,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#0956aa' },
            { offset: 1, color: '#1599fe' }
          ])
        },
        showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 10,
            y: 0,
            x2: 10,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderType: 'solid',
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#52809E'// 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(62, 92, 111, 0.2)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          borderWidth: 20,
          opacity: '0.12'
        }
      },
    ],
    grid: {
      top: '10px',
      left: '10%',
      right: '4%',
      bottom: '18%',
    },
  };
  
  centerBottomList.setOption(option, true);
  window.addEventListener("resize", resize);
  
  // 设置定时器，每2秒更新一次数据
  setInterval(updateData, 2000);
};
// 能耗监测
const getEnergyInit = () => {
  let option = {
    // tooltip: {
    //   trigger: 'item'
    // },
    series: [
      {
        name: '能耗监测',
        type: 'pie',
        radius: ['150%', '180%'],
        center: ['50%', '100%'],
        avoidLabelOverlap: false,
        startAngle: 180,
        endAngle: 360,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 55, name: '生活' },
          { value: 25, name: '生产' },
          { value: 10, name: '办公' },
          { value: 10, name: '客勤' },
        ],
        color: ['#33cccc', '#177de0', '#bfeaff', '#e9bb1f']
      }
    ]
  }
  energyList.setOption(option, true)
  energyList.on('mouseover', function (params) {
    nhValue.value = params.data.value
    nhTxt.value = params.data.name
  })
  window.addEventListener("resize", resize)
}
// 生产设备
const getProductionEquipmentInit = () => {
  let option = {
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   orient: 'vertical',
    //   itemWidth: 6,  // 设置宽度
    //   itemHeight: 6, // 设置高度
    //   icon: 'circle',
    //   left: '55%',
    //   top: '15%',
    //   textStyle: { //图例文字的样式
    //     color: '#80878d',
    //     fontSize: 10
    //   },
    //   formatter: function (name) {
    //     let data = option.series[0].data
    //     let tarValue
    //     for (let i = 0; i < data.length; i++) {
    //       if (data[i].name == name) {
    //         tarValue = data[i].value
    //       }
    //     }
    //     let v = tarValue
    //     return `${name}   ${v} `
    //   }
    // },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['70%', '90%'],
        // center: ['26%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 822, name: '在线设备' },
          { value: 95, name: '故障设备' },
        ],
        color: ['#0369dc', '#f6b000']
      }
    ]
  }
  productionEquipmentList.setOption(option, true)
  window.addEventListener("resize", resize)
}
const getYieldInit = () => {
  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['标准值', '实际值'],
      itemWidth: 6,  // 设置宽度
      itemHeight: 6, // 设置高度
      icon: 'diamond',
      textStyle: {
        color: '#96b2d2',
        fontSize: 10
      },
      left: '5%',
      top: '1%',
    },
    xAxis: {
      type: 'category',
      data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6'],
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          width: 1,
          color: '#2d3d4f'
        }
      },
      axisLabel: {
        color: '#adc2d0',
        fontSize: 10
      }
    },
    grid: {
      top: '28px',
      left: '15%',
      right: '8%',
      bottom: '25%',
    },
    series: [
      {
        data: [820, 1290, 1032, 901, 534, 1330],
        type: 'line',
        smooth: true,
        symbol: 'none',
        name: '标准值'
      },
      {
        data: [620, 532, 601, 834, 1090, 1030],
        type: 'line',
        smooth: true,
        symbol: 'none',
        name: '实际值'
      }
    ]
  }
  yieldList.setOption(option, true)
  window.addEventListener("resize", resize)
}


const resize = () => {
  secondList.resize()
  yieldList.resize()
  energyList.resize()
  centerBottomList.resize()
  productionEquipmentList.resize()
  column1List.resize()
  column2List.resize()
}
const echartsInit = () => {
  secondList = echarts.init(secondRef.value)
  centerBottomList = echarts.init(centerBottomRef.value)
  productionEquipmentList = echarts.init(productionEquipmentRef.value)
  column1List = echarts.init(columnRef1.value)
  column2List = echarts.init(columnRef2.value)
  yieldList = echarts.init(yieldRef.value)
  energyList = echarts.init(energyRef.value)
}
onMounted(() => {
  echartsInit()
  getInit()
  getYieldInit()
  getEnergyInit()
  getCenterBottomInit()
  getProductionEquipmentInit()
  getColumn1Init(column1List, [50], 100, 'rgba(167, 137, 79, 1)', columnRef1.value)
  getColumn1Init(column2List, [40], 100, 'rgba(0, 113, 250, 1)', columnRef2.value)
});
</script>

<style scoped lang="less">
.FactoryOverview {
  display: flex;
  justify-content: space-between;
  background: url(../../assets/img/bg1.png) no-repeat;
  background-size: 100% 100%;
  .leftFactory {
    margin-top: -20px;
    .conList {
      width: 530px;
    }
    .first {
      height: 256px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        display: flex;
        padding: 12px;
        height: 205px;
        justify-content: center;
        align-items: center;
        p {
          font-size: 14px;
          &:last-child {
            font-size: 12px;
          }
          span {
            font-size: 24px;
            color: #00f6ff;
            margin-right: 2px;
          }
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          width: 390px;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          li {
            width: 190px;
            height: 79px;
            background: rgba(19, 126, 90, 0.1);
            display: flex;
            padding: 10px 6px;
            align-items: center;
            > div {
              &:first-child {
                width: 50px;
                height: 50px;
              }
            }
            .inventory1 {
              background: url(../../assets/img/inventory1.png) no-repeat center;
              background-size: contain;
            }
            .inventory2 {
              background: url(../../assets/img/inventory2.png) no-repeat center;
              background-size: contain;
            }
            .inventory3 {
              background: url(../../assets/img/inventory3.png) no-repeat center;
              background-size: contain;
            }
            .inventory4 {
              background: url(../../assets/img/inventory4.png) no-repeat center;
              background-size: contain;
            }
          }
        }
        > div {
          margin-top: 5px;
          width: 160px;
          height: 160px;
          background: url(../../assets/img/inventory.png) no-repeat center;
          background-size: contain;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: 38px;
        }
      }
    }
    .second {
      height: 266px;
      margin: 20px 0;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        width: 520px;
        height: 210px;
      }
    }
    .third {
      height: 380px;
      background: rgba(1, 27, 55, 0.6);
      .conMain {
        padding: 15px;
        display: flex;
        gap: 15px;
        .column {
          width: 168px;
          height: 150px;
        }
        .columnBox {
          width: 240px;
          height: 287px;
          border: 1px solid #05385c;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 20px;
          ul {
            display: flex;
            color: #afb7c1;
            padding-left: 30px;
            li {
              width: 100px;
            }
            span {
              font-size: 30px;
              color: #fff;
            }
          }
        }
        .column1 {
          background-color: #01193a;
        }
        .column2 {
          background-color: #011a3b;
        }
      }
    }
  }
  .centerMain {
    width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
    .centerTop {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .topMain {
      width: 603px;
      height: 118px;
      background: url(../../assets/img/main.png) no-repeat;
      background-size: 100% 100%;
      // background-size: contain;
      .title {
        display: flex;
        margin-right: -10px;
        font-size: 16px;
        align-items: center;
        height: 46px;
        gap: 230px;
        justify-content: center;
      }
      .time {
        display: flex;
        font-size: 14px;
        margin-right: -40px;
        align-items: center;
        height: 60px;
        justify-content: center;
        p {
          width: 280px;
          &:first-child {
            text-align: right;
            padding-right: 100px;
          }
          &:last-child {
            text-align: left;
            padding-left: 40px;
          }
        }
        span {
          font-size: 30px;
          color: #00f6ff;
          margin-right: 10px;
          font-family: DS-Digital;
        }
      }
    }
    .centerText {
      width: 586px;
      height: 65px;
      margin-top: 15px;
      font-size: 14px;
      background: url(../../assets/img/center2.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      padding-left: 100px;
      > div {
        min-width: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          &:first-child {
            margin-bottom: 2px;
          }
          &:last-child {
            font-size: 12px;
          }
        }
        span {
          font-size: 20px;
        }
      }
    }
    .bottomMain {
      width: 760px;
      height: 246px;
      background: url(../../assets/img/center3.png) no-repeat;
      background-size: 100% 100%;
      .title {
        display: flex;
        justify-content: end;
        padding-right: 30px;
        padding-top: 5px;
      }
      p {
        width: 214px;
        height: 36px;
        margin-bottom: 5px;
        background: rgba(216, 240, 255, 0.1);
        border-left: 1px solid #6e7a83;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 24px;
          color: #00f6ff;
        }
      }
      .centerBottom {
        width: 760px;
        height: 190px;
      }
    }
  }
  .rightFactory {
    width: 530px;
    margin-top: -26px;
    .rightF1 {
      width: 530px;
      height: 95px;
      background: url(../../assets/img/right1.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      gap: 15px;
      align-items: center;
      justify-content: center;
      .button {
        width: 125px;
        height: 70px;
        background: url(../../assets/img/buttonRight.png) no-repeat;
        background-size: 100% 100%;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
        p {
          font-size: 14px;
          span {
            font-size: 30px;
            color: #fff;
            font-family: DS-Digital;
            text-shadow: 0px 0px 4px #00a7ff;
            margin-right: 3px;
          }
        }
      }
      .icon {
        width: 55px;
        height: 90px;
        margin-left: 15px;
        background: url(../../assets/img/icond.png) no-repeat center;
        background-size: contain;
      }
      .text {
        font-size: 16px;
        color: #00ff96;
      }
    }
    .conList {
      margin-top: 10px;
      background: rgba(1, 27, 55, 0.6);
    }
    .rightStyles {
      .con {
        display: flex;
        flex-direction: column;
        align-items: center;
        .text {
          width: 456px;
          height: 90px;
          background-size: 100% auto;
          display: flex;
          justify-content: center;
          align-items: center;
          li {
            padding: 0 30px;
            position: relative;
            &::after {
              content: "";
              display: block;
              position: absolute;
              right: -2px;
              top: 8px;
              height: 45px;
              border-right: 1px dashed #999;
            }
            &:last-child {
              &::after {
                height: 0px;
              }
            }
            p {
              color: rgba(255, 255, 255, 0.7);
              span {
                font-size: 32px;
                color: #fff;
                margin-right: 2px;
              }
            }
          }
        }
        .zlBottom {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 90px;
          margin-left: -40px;
          .tip {
            color: #7d838a;
            font-size: 14px;
          }
        }
        .productionEquipmentBox {
          width: 125px;
          height: 125px;
          position: relative;
          .textZL {
            p:first-child {
              font-size: 18px;
              color: #fff;
            }
            height: 125px;
            width: 125px;
            background: url(../../assets/img/circle1.png) no-repeat center;
            background-size: contain;
            position: absolute;
            left: 10%;
            top: -8%;
            text-align: center;
            font-size: 12px;
            color: #bfc2c6;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .productionEquipment {
            left: 10%;
            top: -8%;
            width: 125px;
            height: 125px;
          }
        }
        .productionNHBox {
          width: 220px;
          height: 100px;
          position: relative;
          margin-top: 10px;
          .textNH {
            p:first-child {
              color: #fff;
              span {
                font-size: 24px;
                margin-right: 3px;
              }
            }
            background: url(../../assets/img/huan.png) no-repeat center;
            background-size: contain;
            width: 220px;
            height: 100px;
            position: absolute;
            left: 0%;
            top: 0%;
            padding-top: 35px;
            text-align: center;
            font-size: 12px;
            color: #bfc2c6;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .productionEquipment {
            left: 0;
            top: 0;
            width: 220px;
            height: 100px;
          }
        }
        .lastBottom {
          gap: 30px;
          .tip {
            p {
              &:nth-child(1) {
                &::after {
                  background-color: #33cccc;
                }
              }
              &:nth-child(2) {
                &::after {
                  background-color: #177de0;
                }
              }
              &:nth-child(3) {
                &::after {
                  background-color: #bfeaff;
                }
              }
              &:nth-child(4) {
                &::after {
                  background-color: #e9bb1f;
                }
              }
            }
          }
        }
      }
    }
    .rightF2 {
      width: 530px;
      height: 266px;
      .text {
        background: url(../../assets/img/right2.png) no-repeat bottom;
        li {
          margin-top: -6px;
        }
      }
      .zlBottom {
        .tip {
          margin-top: -20px;
          line-height: 30px;
          p {
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              background-color: #f6b000;
              border-radius: 50%;
              position: absolute;
              left: -15px;
              top: 12px;
            }
            &:first-child {
              &::after {
                background-color: #0369dc;
              }
            }
            &:last-child {
              &::after {
                background-color: #f62800;
              }
            }
          }
          span {
            font-size: 18px;
            margin-left: 5px;
            color: #fff;
          }
        }
      }
    }
    .rightF3 {
      width: 530px;
      height: 256px;
      .yieldList {
        width: 530px;
        height: 205px;
      }
      .yieldBox {
        position: relative;
        .title {
          padding: 3px 15px;
          background: rgba(216, 240, 255, 0.1);
          border-left: 1px solid #6e7a83;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          right: 8%;
          top: 2%;
          span {
            font-size: 24px;
            color: #00f6ff;
            margin: 0 4px;
          }
        }
      }
    }
    .rightF4 {
      width: 530px;
      height: 290px;
      .text {
        margin-top: 10px;
        background: url(../../assets/img/right3.png) no-repeat center;
      }
      .zlBottom {
        .tip {
          line-height: 25px;
          p {
            position: relative;
            color: #fff;
            &::after {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              background-color: #177de0;
              position: absolute;
              left: -15px;
              top: 10px;
            }
            &:first-child {
              &::after {
                background-color: #33cccc;
              }
            }
            &:last-child {
              &::after {
                background-color: #bfeaff;
              }
            }
            span {
              margin-left: 40px;
            }
          }
        }
      }
    }
  }
}
</style>